<template>
  <div class="safe">
    <div class="safe-btn" @click="modalVisible = true">
      <span class="iconfont iconanquan"></span>
      <span>登录密码修改</span>
    </div>
    <c-modal :visible.sync="modalVisible" v-if="modalVisible" title="登录密码修改" @ok="save" @close="close">
      <a-tabs v-model="activeKey">
        <a-tab-pane key="byOld" tab="旧密码验证修改">
          <by-old ref="byOld"></by-old>
        </a-tab-pane>
        <a-tab-pane key="byCode" tab="短信验证修改" force-render>
          <by-code ref="byCode"></by-code>
        </a-tab-pane>
      </a-tabs>
    </c-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Input, Tabs } from "ant-design-vue";
import CModal from "@/components/CModal/index.vue";
import ByOld from "./byOld.vue";
import ByCode from "./byCode.vue";

@Component({
  name: "Safe",
  components: {
    CModal,
    ByOld,
    ByCode,
    AInput: Input,
    AInputPassword: Input.Password,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane
  }
})
export default class Safe extends Vue {
  private modalVisible = false;
  private activeKey = "byOld";
  private oldPassword = "";
  private newPassword = "";
  private saving = false;

  private async save() {
    const promise = await (this.$refs as any)[this.activeKey].save();
    if (promise) {
      this.$message.success("保存成功");
      this.modalVisible = false;
      setTimeout(() => (this.activeKey = "byOld"), 500);
    }
  }

  private close() {
    this.activeKey = "byOld";
    (this.$refs as any)[this.activeKey].init();
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.safe-btn {
  // position: absolute;
  // top: 12px;
  // right: 22px;
  padding: 3px 5px;
  color: #2674d5;
  background: #e9f3ff;
  border: 1px solid #2674d5;
  border-radius: 3px;
  cursor: pointer;
  .iconanquan {
    font-size: 14px;
    margin-right: 2px;
  }
}
.c-modal {
  .ant-tabs {
    /deep/.ant-tabs-bar {
      .ant-tabs-nav-scroll {
        text-align: center;
      }
      .ant-tabs-nav .ant-tabs-tab {
        .scale(margin-right, 102px);
        padding: 20px 0px 8px 0px;
        &:last-child {
          margin-right: 0;
        }
      }
      .ant-tabs-nav .ant-tabs-tab-active {
        color: #65b0fb;
        font-weight: normal;
      }
      .ant-tabs-ink-bar {
        background-color: #65b0fb;
      }
    }
  }
}

/deep/.input-div {
  .scale(margin-left, 74px);
  .scale(margin-right, 74px);
  .scale(padding-top, 16px);

  .row {
    .scale(margin-bottom, 30px);
    border: 1px solid #ebebeb;
    border-radius: 2px;
    display: flex;
    align-items: center;
    color: white;
    height: 36px;
    line-height: 36px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .ant-input-affix-wrapper {
    height: 100%;
  }

  .ant-input {
    border: 0;
    height: 100%;
  }

  .send-btn {
    cursor: pointer;
    padding: 0 16px;
    flex-shrink: 0;
    height: 100%;
    border-radius: 0;
  }
}
</style>
